<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body id="bg">
<div id="login">
    <div id="loginBox">
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="ruleForm" label-width="80px"
                 class="demo-ruleForm" id="loginForm">
<%--            <p id="zt">登录</p>--%>
            <el-form-item prop="aName">
                <el-input type="text" placeholder="请输入用户名/邮箱/手机号" v-model="loginForm.aName" autocomplete="off"
                          id="inputU"></el-input>
            </el-form-item>
            <el-form-item prop="aPassword">
                <el-input type="text" placeholder="请输入密码" v-model="loginForm.aPassword" autocomplete="off"
                          id="inputP"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="login" @click="login()" id="button">登录</el-button>
                <a href="" id="forget">忘记密码</a>

            </el-form-item>
        </el-form>
    </div>
    <%--登陆失败提示--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <p style="color: red">账号或密码错误</p>

        </span>
    </el-dialog>
</div>
</body>
<script>
    var login = new Vue({
        el: "#login",
        data: {

            dialogVisible: false,

            loginForm: {},
            //登录的规则
            loginRules: {
                aName: [
                    {required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur'},
                ],
                aPassword: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ]
            }
        },
        methods: {
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        axios.post("/login/admin", this.loginForm).then(resp => {
                            if (resp.data.code == 200) {
                                this.$message.success("登录成功");
                                location.href = "/index.jsp";

                            }else {
                                this.dialogVisible = true;
                            }
                        })
                    }
                })
            }
        }
    })
</script>

<style type="text/css">
    #loginBox {
        width: 450px;
        height: 300px;
        margin: 150px auto;

    }

    #loginForm {
        height: 350px;
        width: 400px;
        float: left;
        margin-left: -338px;
        margin-top: 18px;
        /*background-color:white;*/
    }

    #inputU {
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
        margin-top: 135px;
    }

    #inputP {
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
    }

    #button {
        background-color: #31b0d5;
        width: 94%;
        border-radius: 10px;
        margin-left: -30px;
    }

    #bg {
        background-image: url("/imgs/admin.png");
        background-size: 120% 120%;
    }

    #forget {
        color: #D1D1D1;
        margin-left: 145px;
        text-decoration: none;
    }

    #reg {
        color: #66b1ff;
        margin-left: 8px;
        text-decoration: none;
    }

    /*#zt {*/
    /*    color: #0F0F0F;*/
    /*    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "华文行楷", Arial, sans-serif;*/
    /*    font-size: 60px;*/
    /*    margin-left: 140px;*/
    /*    margin-top: 17px;*/
    /*    margin-bottom: 0;*/
    /*}*/
</style>
</html>

